<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="2"><div class="grid-content partOne">项目分类</div></el-col>
        <el-col :span="4"><div class="grid-content partTwo"></div></el-col>
        <el-col :span="10"><div class="grid-content partThree"><el-input placeholder="请输入项目名称" v-model="input3" class="input-with-select"></el-input></div></el-col>
        <el-col :span="1"><div class="grid-content partTwo"><el-button type="primary">搜索</el-button></div></el-col>
        <el-col :span="1"><div class="grid-content partTwo"></div></el-col>
        <el-col :span="1"><div class="grid-content partTwo">用户</div></el-col>
        <el-col :span="5"><div class="grid-content partThree"> <div class="userImage"><el-avatar  :size="55" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></div> </div></el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px"><el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="待处理" name="class1">
          <el-table
              :data="tableData01"
              stripe
              style="width: 100%">
            <el-table-column
                prop="projectName"
                label=""
                width="180"
            >
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="待审批" name="class2">
          <el-table
              :data="tableData02"
              stripe
              style="width: 100%">
            <el-table-column
                prop="projectName"
                label=""
                width="180">
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="已通过" name="class3">
          <el-table
              :data="tableData03"
              stripe
              style="width: 100%">
            <el-table-column
                prop="projectName"
                label=""
                width="180">
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse></el-aside>
      <el-container>
        <el-main>Main</el-main>
        <el-footer>
          <el-link type="primary">办公室管理&nbsp; |&nbsp;  </el-link>
          <el-link type="primary">关于我们&nbsp;|&nbsp;  </el-link>
          <el-link type="primary">帮助</el-link>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>

</template>

<script>

export default {
  data() {
    return {
      tableData01: [{
        projectName: 'project1',
      }, {
        projectName: 'project2',
      }],

      tableData02: [{
        projectName: 'project3',
      }, {
        projectName: 'project4',
      }],

      tableData03: [{
        projectName: 'project5',
      }, {
        projectName: 'project6',
      }]
    }
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-header{
  font-size: 20px;
  font-weight: bold;
}
.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 600px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 600px;
}

body > .el-container {
  margin-bottom: 40px;
}

.partThree{
  text-align: left;
}

</style>